<%@ page language="java" contentType="text/html; charset=UTF-8"	 pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <title>菜单权限码配置</title>
</head>
<body>

  <div class="layui-fluid">
  	<div class="layui-col-md2" style="width:24%;">
  		<div class="layui-card" style="height: 800px;overflow-y: scroll;">
      		<div class="layui-card-body" >
      			<div id="menuTree"></div>
      		</div>
      	</div>
  	</div>
  	<div class="layui-col-md10"  style="width:76%">
	    <div class="layui-card">
	    	<div class="layui-card-header">
				<span id="breadcrumb" class="layui-breadcrumb" lay-separator="-">
				  <a href="javascript:void(0)" class="layui-disabled">运营管理平台</a>
				</span>
			</div>
	      	<div class="layui-card-body">
	      	<!-- 菜单数据表格 -->
	       	<table id="LAY-menu-purview-manage" lay-filter="LAY-menu-purview-manage"></table>
	        <div class="layui-form" lay-filter="menu_form" id="menu_form" style="padding: 20px 30px 0 0;display:none">
	        	<input type="hidden" name="id" id="menu_form_hidden_id" />
	   			<input type="hidden" name="sparentId" />
			    <div class="layui-form-item">
			      <label class="layui-form-label">菜单名称</label>
			      <div class="layui-input-block">
			        <input type="text" name="sname" maxlength="50" lay-verify="required" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-form-item">
			      <label class="layui-form-label">路径</label>
			      <div class="layui-input-block">
			        <input type="text" name="smenuPath" maxlength="50" lay-verify="required" placeholder="请输入路径" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-form-item">
			      <label class="layui-form-label">排序号</label>
			      <div class="layui-input-block">
			        <input type="text" name="isort" maxlength="20" lay-verify="required|number" placeholder="请输入排序号" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-form-item layui-form-text">
				    <label class="layui-form-label">描述</label>
				    <div class="layui-input-block">
				      <textarea name="sremark" maxlength="100" lay-verify="required" placeholder="请输入描述" class="layui-textarea"></textarea>
				    </div>
			  	</div>
			    <div class="layui-form-item layui-hide">
			      <input type="button" lay-submit lay-filter="menu_form_submit" id="menu_form_submit" value="确认">
			    </div>
		  	</div>
		  	
		  	<%-- 添加编辑权限window --%>
	        <div class="layui-form" lay-filter="purview_form" id="purview_form" style="padding: 20px 30px 0 0;display:none">
	        	<input type="hidden" name="id" id="purview_form_hidden_id" />
	   			<input type="hidden" name="sparentId" />
			    <div class="layui-form-item">
			      <label class="layui-form-label">权限码</label>
			      <div class="layui-input-block">
			        <input type="text" name="spurCode" maxlength="50" lay-verify="required" placeholder="请输入权限码" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-form-item">
			      <label class="layui-form-label">权限名称</label>
			      <div class="layui-input-block">
			        <input type="text" name="spurName" maxlength="50" lay-verify="required" placeholder="请输入权限名称" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-form-item">
			      <label class="layui-form-label">路径</label>
			      <div class="layui-input-block">
			        <input type="text" name="surlPath" maxlength="100" lay-verify="required" placeholder="请输入路径" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-form-item layui-form-text">
				    <label class="layui-form-label">说明</label>
				    <div class="layui-input-block">
				      <textarea name="sdescription" maxlength="100" lay-verify="required" placeholder="请输入说明" class="layui-textarea"></textarea>
				    </div>
			  	</div>
			    <div class="layui-form-item layui-hide">
			      <input type="button" lay-submit lay-filter="purview_form_submit" id="purview_form_submit" value="确认">
			    </div>
		  	</div>
	      </div>
	    </div>
    </div>
  </div>

	<script type="text/html" id="table-toolbar-addmenu">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addMenu">
				<i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>添加菜单
	        </button>
            <button class="layui-btn layui-btn-sm" onclick="refreshCache()">
				<i class="layui-icon layui-icon-refresh-3 layuiadmin-button-btn"></i>刷新缓存
			</button>
       	</div>
  	</script>
	<script type="text/html" id="table-toolbar-addmenudeletepur">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="addMenuDelPur">
				<i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>添加菜单
	        </button>
			<button class="layui-btn layui-btn-sm" lay-event="addPurview">
				<i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>添加权限码
	        </button>
            <button class="layui-btn layui-btn-sm" onclick="refreshCache()">
				<i class="layui-icon layui-icon-refresh-3 layuiadmin-button-btn"></i>刷新缓存
			</button>
       	</div>
  	</script>
	<script type="text/html" id="table-toolbar-addpurview">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="addPurview">
				<i class="layui-icon layui-icon-add-1 layuiadmin-button-btn"></i>添加权限码
	        </button>
            <button class="layui-btn layui-btn-sm" onclick="refreshCache()">
				<i class="layui-icon layui-icon-refresh-3 layuiadmin-button-btn"></i>刷新缓存
			</button>
       	</div>
  	</script>
  <script>
  layui.config({
    base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'table', 'set', 'tree'], function(){
    var $ = layui.$
    ,form = layui.form
    ,table = layui.table;
    //加载菜单树
    menuTreeRender();
    //默认加载页为根目录，所以赋值为-1
    $('input[name=sparentId]').val("-1");
    //菜单管理
    table.render({
      	elem: '#LAY-menu-purview-manage'
      	,url: basePath + '/menu/getMenuByParentId?id=-1' //请求数据接口
      	,toolbar:'#table-toolbar-addmenu'
      	,defaultToolbar: []
      	,cols: [[
        	{type: 'checkbox', fixed: 'left'}
        	,{field: 'smenuNo', title: '编号'}
        	,{field: 'sname', title: '菜单名称'}
        	,{field: 'smenuPath', title: '路径'}
        	,{field: 'isort', title: '序号'}
        	,{field: 'sremark', title: '描述'}
        	,{title: '操作', width: 150, align:'center', fixed: 'right', templet: function(d){
	      	  	var optStr ="";
	      	  	<shiro:hasPermission name="EDIT_MENU">
	      	  	 	optStr += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editMenu"><i class="layui-icon layui-icon-edit"></i>编辑</a>';
	  	  	  	</shiro:hasPermission>
	  	  	  	<shiro:hasPermission name="DELETE_MENU">
	    			optStr += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delMenu"><i class="layui-icon layui-icon-delete"></i>删除</a>';
	  		  	</shiro:hasPermission>
	  		  	return optStr;
        		}
        	}
      	]]
      	,page: true
      	,limit: 10
    });
    
  	//头工具栏事件
    table.on('toolbar(LAY-menu-purview-manage)', function(obj){
      switch(obj.event){
        case 'addMenu'://新增菜单
        	clean_menu_form();//清空表单
        	layer.open({
                type: 1
                ,title: '添加菜单'
                ,content: $('#menu_form')
                ,area: layui.admin.screen() < 2 ? ['80%', '400px'] : ['420px','400px']
                ,btn: ['确定', '取消']
                ,btnAlign: 'c'
                ,yes: function(index, layero){
              	  	var submitID = 'menu_form_submit'
                  	,submit = layero.contents().find('#'+ submitID);
              	  	if($('input[name=sparentId]').val()==""){
              	  		layer.alert('请先选中父节点！',{icon: 0});
             			return false;
             		}
                    //监听提交
                 	form.on('submit('+ submitID +')', function(data){
                    	var field = data.field; //获取提交的字段
                    	//提交 Ajax 成功后，静态更新表格中的数据
                    	$.ajax({
                        	type : 'post',
      						url : basePath + '/menu/save',
                        	data: field,
      						success:function(result){
	      						if(result.success){
                    				table.reload('LAY-menu-purview-manage'); //table数据刷新
                    				//左侧菜单刷新
                    				menuTreeRender();
                    				layer.close(index); //关闭弹层
                    				clean_menu_form();//清空表单
	      						}else{
	      							layer.msg(result.msg,{icon: 7});
	      					  	}
      						}
                   		});
                  	});  
                  submit.trigger('click');
                }
              });
        break;
        case 'addMenuDelPur'://新增菜单并删除当前菜单权限码
        	clean_menu_form();//清空表单
        	layer.open({
                type: 1
                ,title: '添加菜单'
                ,content: $('#menu_form')
                ,area: layui.admin.screen() < 2 ? ['80%', '400px'] : ['420px','400px']
                ,btn: ['确定', '取消']
                ,btnAlign: 'c'
                ,yes: function(index, layero){
              	  	var submitID = 'menu_form_submit'
                  	,submit = layero.contents().find('#'+ submitID);
              	  	if($('input[name=sparentId]').val()==""){
              	  		layer.alert('请先选中父节点！',{icon: 0});
             			return false;
             		}
                    //监听提交
                 	form.on('submit('+ submitID +')', function(data){
             	  			layer.confirm('确定添加菜单并删除当前菜单权限码？',{icon:3, title :'提示'}, function(ind){
	                    	var field = data.field; //获取提交的字段
	                    	//提交 Ajax 成功后，静态更新表格中的数据
	                    	$.ajax({
	                        	type : 'post',
	      						url : basePath + '/menu/saveAndDelPur',
	                        	data: field,
	      						success:function(result){
		      						if(result.success){
	                    				//table.reload('LAY-menu-purview-manage'); //table数据刷新
	                    				reloadMenu(field.sparentId);
	                    				//左侧菜单刷新
	                    				menuTreeRender();
	                 					layui.layer.close(ind);//关闭确认框
	                    				layer.close(index); //关闭弹层
	                    				clean_menu_form();//清空表单
		      						}else{
		      							layer.msg(result.msg,{icon: 7});
		      					  	}
	      						}
	                   		});
                  		});
             	  		});
                  submit.trigger('click');
                }
              });
        break;
        case 'addPurview'://新增权限码
        	clean_purview_form();//清空表单
        	layer.open({
                type: 1
                ,title: '添加权限'
                ,content: $('#purview_form')
                ,area: layui.admin.screen() < 2 ? ['80%', '400px'] : ['420px','400px']
                ,btn: ['确定', '取消']
                ,btnAlign: 'c'
                ,yes: function(index, layero){
              	  	var submitID = 'purview_form_submit'
                  	,submit = layero.contents().find('#'+ submitID);
                    //监听提交
                 	form.on('submit('+ submitID +')', function(data){
                    	var field = data.field; //获取提交的字段
                    	//提交 Ajax 成功后，静态更新表格中的数据
                    	$.ajax({
                        	type : 'post',
      						url : basePath + '/purview/save',
                        	data: field,
      						success:function(result){
	      						if(result.success){
                    				table.reload('LAY-menu-purview-manage'); //数据刷新
                    				layer.close(index); //关闭弹层
                    				clean_purview_form();//清空表单
	      						}else{
	      							layer.msg(result.msg,{icon: 7});
	      					  	}
      						}
                   		});
                  	});  
                  submit.trigger('click');
                }
             });
      	};
    });
    
    //监听行工具条
    table.on('tool(LAY-menu-purview-manage)', function(obj){
      var data = obj.data;
      if(obj.event === 'delPurv'){//删除权限
          layer.confirm('确定删除？',{icon:3, title :'提示'}, function(index){
          	$.ajax({
  				type : 'post',
  				url : basePath + '/purview/delete?checkboxId=' + data.id,
  				success:function(result){
  					if(result.success){
  						table.reload('LAY-menu-purview-manage'); //数据刷新
  						layer.close(index);
  					}else{
  						layer.msg(result.msg, {icon: 7});
  				  	}
  				}
  			});
          });
      }else if(obj.event === 'delMenu'){//删除菜单
          layer.confirm('确定删除？',{icon:3, title :'提示'}, function(index){
            	$.ajax({
    				type : 'post',
    				url : basePath + '/menu/delete?checkboxId=' + data.id,
    				success:function(result){
    					if(result.success){
    						table.reload('LAY-menu-purview-manage'); //数据刷新
    						//左侧菜单树刷新
    						menuTreeRender();
    						layer.close(index);
    					}else{
    						layer.msg(result.msg, {icon: 7});
    				  	}
    				}
    			});
            });
        } else if(obj.event === 'editPurv'){//编辑权限
      		form.val('purview_form',data);
      		layer.open({
           		type: 1
            	,title: '编辑权限<' + data.sroleName + '>'
            	,content: $('#purview_form')
	            ,area: layui.admin.screen() < 2 ? ['80%', '400px'] : ['420px','400px']
	            ,btn: ['确定', '取消']
	            ,btnAlign: 'c'
	            ,yes: function(index, layero){
          	  		var submitID = 'purview_form_submit'
          		  	,submit = layero.contents().find('#'+ submitID);
	          	  	//监听提交
	          	  	form.on('submit('+ submitID +')', function(data){
	                	var field = data.field; //获取提交的字段
	                	//提交 Ajax 成功后，静态更新表格中的数据
		                $.ajax({
		                    type : 'post',
		  					url : basePath + '/purview/save',
		                    data: field,
		  					success:function(result){
		  						if(result.success){
		  							$('#purview_form_hidden_id').val('');
		                			table.reload('LAY-menu-purview-manage'); //数据刷新
		                			layer.close(index); //关闭弹层
		  						}else{
		  							layer.msg(result.msg,{icon: 7});
		  					  	}
		  					}
		                });
		              });  
              	submit.trigger('click');
            	}
          	});
        } else if(obj.event === 'editMenu'){//编辑菜单
      		form.val('menu_form',data);
      		layer.open({
           		type: 1
            	,title: '编辑菜单<' + data.sroleName + '>'
            	,content: $('#menu_form')
	            ,area: layui.admin.screen() < 2 ? ['80%', '400px'] : ['420px','400px']
	            ,btn: ['确定', '取消']
	            ,btnAlign: 'c'
	            ,yes: function(index, layero){
          	  		var submitID = 'menu_form_submit'
          		  	,submit = layero.contents().find('#'+ submitID);
	          	  	//监听提交
	          	  	form.on('submit('+ submitID +')', function(data){
	                	var field = data.field; //获取提交的字段
	                	//提交 Ajax 成功后，静态更新表格中的数据
		                $.ajax({
		                    type : 'post',
		  					url : basePath + '/menu/save',
		                    data: field,
		  					success:function(result){
		  						if(result.success){
		  							$('#menu_form_hidden_id').val('');
		                			table.reload('LAY-menu-purview-manage'); //数据刷新
		                			layer.close(index); //关闭弹层
		  						}else{
		  							layer.msg(result.msg,{icon: 7});
		  					  	}
		  					}
		                });
		              });  
              	submit.trigger('click');
            	}
          	});
        }
    });
    
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
  });
  
  function menuTreeRender(){
	  var $ = layui.$;
	  var tree = layui.tree;
	  var table = layui.table;
	  var treeData = [];
	  var node = {
					title: '运营管理平台',
					spread:true,
					id:-1,
					attributes:"notleaf"
				};
	  layui.$.getJSON('${ctx}/menu/getLayMenuTree', function (data) {
		  if(data != null && data.length > 0){
			  node.children=data;
			  treeData.push(node);
		  }
	 		//渲染权限树
	    	tree.render({
	      		elem: '#menuTree'  //绑定元素
	      		,data: treeData
	      	    ,id: 'treeRender' //定义索引
	      		,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
	      		,showLine:true	//是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。
	  	      	,click: function(obj){
	   	         	//console.log(obj.data); //得到当前点击的节点数据
	   	         	//console.log(obj.state); //得到当前节点的展开状态：open、close、normal
	   	         	//console.log(obj.elem); //得到当前节点元素
	   	         	//console.log(obj.data.children); //当前节点下是否有子节点
	   	         	//加载面包屑导航
	   	         	var breadHtml = '';
	   	         	$("#breadcrumb").html('');
	   	         	//根目录不加载
	   	         	if(obj.data.id != '-1'){
	  	         		breadHtml = breadHtml + '<a href="javascript:void(0)" class="layui-disabled">运营管理平台</a>';
	   	         	}
	   	         	if(obj.data.sparentid != null && obj.data.sparentid != '-1'){
		   	         	var parentName = $("div[data-id='"+obj.data.sparentid+"']").parent().parent().find("div:first").text();
	   	         		if(parentName != '运营管理平台'){
	   	         			breadHtml = breadHtml + '<a href="javascript:void(0)" class="layui-disabled">'+parentName+'</a>';
	   	         		}
	   	         		var menuName = $("div[data-id='"+obj.data.sparentid+"'] div:first").text();
	   	         		breadHtml = breadHtml + '<a href="javascript:void(0)" class="layui-disabled">'+menuName+'</a>';
	   	         	}
	  	         	breadHtml = breadHtml + '<a href="javascript:void(0)" class="layui-disabled">'+obj.data.title+'</a>';
	   	         	$("#breadcrumb").append(breadHtml);
	   	         	layui.element.render();
	   	         	$('input[name=sparentId]').val(obj.data.id);
					// 点击大菜单右侧出现直接子菜单
					if(obj.data.attributes == "leaf" && obj.data.bisroot == "0") {
						//判断当前是几级菜单
						var breadCount = $("#breadcrumb a").length;
						var menuId = obj.data.id;
						if(menuId == null || menuId == undefined || menuId == ""){
							menuId = -1;
						}
						var toolbarID = '#table-toolbar-addpurview';
						if(breadCount < 4){//二级菜单，显示添加菜单按钮
							toolbarID = '#table-toolbar-addmenudeletepur';
						}
						reloadPur(toolbarID,menuId);
					} else {
						var id = obj.data.id;
						if(id == null || id == undefined || id == ""){
							id = -1;
						}
						reloadMenu(id);
					}
	   	       }
	   	   });
		})
  }
  
  function reloadMenu(id){
	  var table = layui.table;
	  table.render({
	      elem: '#LAY-menu-purview-manage'
	      ,url: basePath + '/menu/getMenuByParentId?id='+id //请求数据接口
	      ,toolbar:'#table-toolbar-addmenu'
	      ,defaultToolbar: []
	      ,cols: [[
	        {type: 'checkbox', fixed: 'left'}
	        ,{field: 'smenuNo', title: '编号'}
	        ,{field: 'sname', title: '菜单名称'}
	        ,{field: 'smenuPath', title: '路径'}
	        ,{field: 'isort', title: '序号'}
	        ,{field: 'sremark', title: '描述'}
	        ,{title: '操作', width: 150, align:'center', fixed: 'right', templet: function(d){
		      	  var optStr ="";
		      	  <shiro:hasPermission name="EDIT_MENU">
		      	  	 optStr += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editMenu"><i class="layui-icon layui-icon-edit"></i>编辑</a>';
		  	  	  </shiro:hasPermission>
		  	  	  <shiro:hasPermission name="DELETE_MENU">
		    		 optStr += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delMenu"><i class="layui-icon layui-icon-delete"></i>删除</a>';
		  		  </shiro:hasPermission>
		  		  return optStr;
	        	}
	        }
	      ]]
	      ,page: true
	      ,limit: 10
	    });
  }
  
  function reloadPur(toolbarID,menuId){
	  var table = layui.table;
	  table.render({
	      elem: '#LAY-menu-purview-manage'
	      ,url: basePath + '/purview/getPurviewByMenuId?menuId='+menuId //请求数据接口
	      ,toolbar: toolbarID
	      ,defaultToolbar: []
	      ,cols: [[
	        {type: 'checkbox', fixed: 'left'}
	        ,{field: 'spurNo', title: '编号'}
	        ,{field: 'spurCode', title: '权限码'}
	        ,{field: 'spurName', title: '名称'}
	        ,{field: 'surlPath', title: '路径'}
	        ,{field: 'sdescription', title: '描述'}
	        ,{title: '操作', width: 150, align:'center', fixed: 'right', templet: function(d){
		      	  var optStr ="";
		      	  <shiro:hasPermission name="EDIT_PURV">
		      	  	 optStr += '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="editPurv"><i class="layui-icon layui-icon-edit"></i>编辑</a>';
		  	  	  </shiro:hasPermission>
		  	  	  <shiro:hasPermission name="DELETE_PURV">
		    		 optStr += '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delPurv"><i class="layui-icon layui-icon-delete"></i>删除</a>';
		  		  </shiro:hasPermission>
		  		  return optStr;
	        	}
	        }
	      ]]
	      ,page: true
	      ,limit: 10
	    })
  }
	//刷新缓存
	function refreshCache(){
		layui.$.ajax({
  		  type : 'post',
  		  url : '${ctx}/zkpPath/operatorPurview',
  		  success:function(result){
  			  if(result.success){
  				  layer.alert(result.msg, {icon:1});
  			  }else{
  				  layer.msg(result.msg, {icon:7});
  			  }
  		  }
  	  });
	}
	
	function clean_menu_form() {
		layui.$('#menu_form :text').val('')
	   	.removeAttr('checked')
	   	.removeAttr('selected');
		layui.$("textarea[name=sremark]").val("");
   	}
   	
   	function clean_purview_form() {
   		layui.$('#purview_form :text').val('')
	   	.removeAttr('checked')
	   	.removeAttr('selected');
   		layui.$("textarea[name=sdescription]").val("");
   	}
  </script>
</body>
</html>

